import React, { BaseComponent } from 'react';
import { Text, StyleSheet } from 'react-native';
import JPushModule from 'jpush-react-native';
import { Button, Toast, Flex, InputItem, List } from '@ant-design/react-native';

export default class Login extends BaseComponent {

  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: '',
        password: ''
      }
    }
  }

  loading = null
  componentDidMount = () => {
    JPushModule.notifyJSDidLoad((resultCode) => { });
    JPushModule.initPush()
    this._bootstrapAsync()
  }

  _bootstrapAsync = async () => {
    //this._onLoginSuccess()
  }

  _onLoginSuccess = () => {
    this.props.navigation.navigate('App');
  }

  login = async () => {
    let form = this.state.form
    if(!form.username){ Toast.fail('请输入账号', 1); return; }
    if(!form.password){ Toast.fail('请输入密码', 1); return; }
    JPushModule.setAlias(form.username)
    this.loading = Toast.loading('login...', 2, () => {
      this._onLoginSuccess()
    })
  }

  render() {
    return (
      <Flex justify="center" align="center" direction="column" style={styles.page}>
        <Flex justify="center" align="center" direction="row" >
          <Text style={styles.title}>登录系统</Text>
        </Flex>
        <Flex justify="center" align="center" direction="row" >
          <List style={styles.form}>
            <InputItem style={styles.item} clear value={this.state.form.username} onChange={value => { this.setForm('username', value) }} placeholder="请输入账号">账号:</InputItem>
            <InputItem style={styles.item} clear value={this.state.form.password} onChange={value => { this.setForm('password', value) }} type="password" placeholder="请输入密码">密码:</InputItem>
            <List.Item style={styles.item}>
              <Button onPress={this.login} type="primary">登录</Button>
            </List.Item>
          </List>
        </Flex>
      </Flex>
    );
  }

}


const styles = StyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '#3e7fbf',
  },
  title : {
    fontSize : 30,
    color : '#fff',
    marginBottom : 50
  },
  form: {
    padding: 30,
    borderRadius: 5,
    backgroundColor: '#fff',
  },
  item: {
    width: 280,
  }
});
